<template>
  <div>
    <ul class="titleTab">
      <li style="background-color:#1D430F">
        <div class="conCol">
          <i class="el-icon-s-order"></i>
          <div>
            <p>2</p>
            <p>用血申请单</p>
          </div>
        </div>
      </li>
      <li style="background-color:#6F1E11">
        <div class="conCol">
          <i class="el-icon-s-order"></i>
          <div>
            <p>2/2</p>
            <p>输血科已审核</p>
          </div>
        </div>
      </li>
      <li style="background-color:#9E5C0F">
        <div class="conCol">
          <i class="el-icon-s-order"></i>
          <div>
            <p>2/2</p>
            <p>完成配血</p>
          </div>
        </div>
      </li>
      <li style="background-color:#0D5276">
        <div class="conCol">
          <i class="el-icon-s-order"></i>
          <div>
            <p>2/2</p>
            <p>待发血制品</p>
          </div>
        </div>
      </li>
      <li style="background-color:#3B1E43">
        <div class="conCol">
          <i class="el-icon-s-order"></i>
          <div>
            <p>2/2</p>
            <p>已输注</p>
          </div>
        </div>
      </li>
      <li style="background-color:#3E616F">
        <div class="conCol">
          <i class="el-icon-s-order"></i>
          <div>
            <p>2/2</p>
            <p>已评价</p>
          </div>
        </div>
      </li>
      <li style="background-color:#24374C">
        <div class="conCol">
          <i class="el-icon-s-order"></i>
          <div>
            <p>2/2</p>
            <p>已回收</p>
          </div>
        </div>
      </li>
    </ul>

    <el-container>
      <el-main>
        <el-table :data="tableData" border style="width: 100%">
          <el-table-column label="血制品库存公示信息">
            <el-table-column fixed prop="title" label="血液成分"></el-table-column>
            <el-table-column prop="name" label="规格" width="120"></el-table-column>
            <el-table-column prop="province" label="A+(袋数)" width="82"></el-table-column>
            <el-table-column prop="city" label="B+(袋数)" width="82"></el-table-column>
            <el-table-column prop="address" label="AB+(袋数)" width="92"></el-table-column>
            <el-table-column prop="zip" label="O+(袋数)" width="92"></el-table-column>
            <el-table-column prop="city" label="A-(袋数)" width="82"></el-table-column>
            <el-table-column prop="address" label="B-(袋数)" width="82"></el-table-column>
            <el-table-column prop="zip" label="AB-(袋数)" width="92"></el-table-column>
            <el-table-column prop="zip" label="O-(袋数)" width="92"></el-table-column>
          </el-table-column>
        </el-table>
      </el-main>
      <el-aside>
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>全院通告</span>
          </div>
          <div v-for="o in 15" :key="o" class="text item">{{'列表内容 ' + o }}</div>
        </el-card>
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>文件下载</span>
          </div>
          <div v-for="o in 15" :key="o" class="text item">{{'列表内容 ' + o }}</div>
        </el-card>
      </el-aside>
    </el-container>
  </div>
</template>
<script>
export default {
  data() {
    return {
      tableData: [
        {
          title: "2016-05-02",
          name: "B",
          province: "A",
          city: "B",
          address: "A",
          zip: 200333,
        },
      ],
    };
  },
};
</script>
<style lang="less" scoped>
.titleTab {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  li {
    border-radius: 5px;
    flex: 1;
    height: 90px;
    margin: 0 10px 0 0;
    cursor: pointer;
    &:hover{
        box-shadow:2px 2px 5px #000;
        transition: all .3s ease
    }
    :first-child {
      margin: 0;
    }
    .conCol {
      display: flex;
      i {
        color: #fff;
        font-size: 48px;
        margin-top: 21px !important;
        margin-left: 8px;
      }
      div {
        flex: 1;
        /deep/ p {
          color: #fff;
          text-align: center;
          margin: 0;
          &:first-child {
            margin: 18px 0 3px 0 !important;
          }
        }
      }
    }
  }
}
.el-container {
  margin: 10px 0 0 0;
  .el-main {
    margin: 0;
    padding: 0;
  }
}
.el-card{
    &:first-child{
        margin: 0 0 10px 0;
    }
    /deep/ .el-card__header{
        height: 47.63px !important;
        padding: 13px 0;
        background:#F5F7FA
    }
    /deep/ .el-card__body{
        height: 150px;
        overflow: auto;
        padding: 5px;
        .item{
            padding: 5px;
        }
    }
}
</style>